<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Form Validation - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/icomoon.css" rel="stylesheet" />
        
        <!-- other -->
        <link href="css/select2/select2-metro.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li class="active"><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!-- /nav -->
            </div><!-- /side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Form Validation</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Form validation</li>
                    </ul>
                </header> <!--/ content header -->
                

                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- DEFAULT SUBMIT HANDLER
                            ================================================== -->
                            <!-- widget submitHandler -->
                            <div class="widget border-cyan" id="widget-submitHandler">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget title -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Default submitHandler</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-submitHandler" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal" id="commentForm" action="" />
                                        <fieldset>
                                            <legend>Please provide your name, email address (won't be published) and a comment</legend>
                                            <div class="control-group">
                                                <label class="control-label" for="cname">Name</label>
                                                <div class="controls">
                                                    <input id="cname" class="input-large" name="name" type="text" minlength="2" required="" />
                                                    <p class="help-inline">(required, at least 2 characters)</p>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="cemail">E-Mail</label>
                                                <div class="controls">
                                                    <input id="cemail" class="input-large" type="email" name="email" required="" />
                                                    <p class="help-inline">(required)</p>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="curl">URL</label>
                                                <div class="controls">
                                                    <input id="curl" class="input-large" type="url" name="url" />
                                                    <p class="help-inline">(optional)</p>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="ccomment">Your comment</label>
                                                <div class="controls">
                                                    <textarea id="ccomment" class="input-large" name="comment" required=""></textarea>
                                                    <p class="help-inline">(required)</p>
                                                </div>
                                            </div><!-- /control-group -->
                                        </fieldset>
                                        <div class="form-actions bg-silver">
                                            <input class="btn bg-emerald bordered" type="submit" value="Submit" />
                                            <input class="btn bg-amber bordered" type="reset" value="Reset" />
                                        </div>
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget submitHandler -->



                            <!-- VALIDATE COMPLETE FORM
                            ================================================== -->
                            <!-- widget validate complete form -->
                            <div class="widget bg-cyan" id="widget-complete">
                                <!-- widget header -->
                                <div class="widget-header">
                                    <!-- widget title -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Validating a complete form</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-complete" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <form class="form-horizontal form-bordered full-widget" id="signupForm" action="" />
                                        <fieldset>
                                            <legend>Signup Form, Please provide your data</legend>
                                            <div class="control-group">
                                                <label class="control-label" for="firstname">Firstname</label>
                                                <div class="controls">
                                                    <input id="firstname" class="input-xlarge" name="firstname" type="text" />
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="lastname">Lastname</label>
                                                <div class="controls">
                                                    <input id="lastname" class="input-xlarge" name="lastname" type="text" />
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="username">Username</label>
                                                <div class="controls">
                                                    <div class="input-prepend input-prepend-inline">
                                                        <input id="username" class="input-xlarge" name="username" type="text" />
                                                        <span class="add-on">@</span>
                                                    </div>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="password">Password</label>
                                                <div class="controls">
                                                    <div class="input-append input-append-inline">
                                                        <input id="password" class="input-xlarge" name="password" type="password" />
                                                        <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                    </div>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="confirm_password">Confirm password</label>
                                                <div class="controls">
                                                    <div class="input-append input-append-inline">
                                                        <input id="confirm_password" class="input-xlarge" name="confirm_password" type="password" />
                                                        <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                    </div>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="email">Email</label>
                                                <div class="controls">
                                                    <div class="input-append input-append-inline">
                                                        <input id="email" class="input-xlarge" name="email" type="email" />
                                                        <span class="add-on"><i class="icomo-mail-5"></i></span>
                                                    </div>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="agree">Term</label>
                                                <div class="controls">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="agree" name="agree" />
                                                        Please agree to our policy
                                                    </label>
                                                </div>
                                            </div><!-- /control-group -->
                                            <div class="control-group">
                                                <label class="control-label" for="newsletter">Newsletter</label>
                                                <div class="controls">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="newsletter" name="newsletter" />
                                                        I'd like to receive the newsletter
                                                    </label>
                                                </div>
                                            </div><!-- /control-group -->
                                        </fieldset>
                                        <fieldset id="newsletter_topics">
                                            <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
                                            <div class="control-group">
                                                <label class="control-label" for="topic_marketflash">Topics</label>
                                                <div class="controls">
                                                    <label class="checkbox" for="topic_marketflash">
                                                        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
                                                        Marketflash
                                                    </label>
                                                    <label class="checkbox" for="topic_fuzz">
                                                        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
                                                        Latest fuzz
                                                    </label>
                                                    <label class="checkbox" for="topic_digester">
                                                        <input type="checkbox" id="topic_digester" value="digester" name="topic" />
                                                        Mailing list digester
                                                    </label>
                                                    <p class="error hide">Please select at least two topics you'd like to receive.</p>
                                                </div>
                                            </div><!-- /control-group -->
                                        </fieldset>
                                        <div class="form-actions">
                                            <input class="btn bg-emerald bordered" type="submit" value="Submit" />
                                            <input class="btn bg-amber bordered" type="reset" value="Reset" />
                                        </div>
                                    </form>

                                </div><!-- /widget content -->
                            </div> <!-- /widget validate complete form -->


                            <!-- row -->
                            <div class="row-fluid">
                                <!-- span -->
                                <div class="span6">
                                    <!-- FILE INPUTS
                                    ================================================== -->
                                    <!-- widget fileinput -->
                                    <div class="widget bg-cyan" id="widget-fileinput">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-edit"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">File Upload Form</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-fileinput" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <form class="form-vertical form-bordered full-widget" id="fileForm" method="post" enctype="multipart/form-data" />
                                                <fieldset>
                                                    <legend>Select the indicated type of files?</legend>
                                                    <div class="control-group">
                                                        <label class="control-label" for="file1">File #1</label>
                                                        <div class="controls">
                                                            <input type="file" id="file1" name="file1" class="required" accept="text/plain" />
                                                            <p class="help-block">plain text file (e.g. *.txt)</p>
                                                        </div>
                                                    </div><!-- /control-group -->
                                                    <div class="control-group">
                                                        <label class="control-label" for="file2">File #2</label>
                                                        <div class="controls">
                                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                                <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;">
                                                                    <img src="holder.js/200x150/social/text:no image" />
                                                                </div>
                                                                <div>
                                                                    <span class="btn bordered btn-file">
                                                                        <span class="fileupload-new">Select image</span>
                                                                        <span class="fileupload-exists">Change</span>
                                                                        <input type="file" id="file2" name="file2" class="required" accept="image/*" />
                                                                    </span>
                                                                    <a href="#" class="btn bordered btn-inverse fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                                </div>
                                                            </div><!-- /fileupload -->
                                                            <p class="help-block">any image file</p>
                                                        </div>
                                                    </div><!-- /control-group -->
                                                    <div class="control-group">
                                                        <label class="control-label" for="file3">File #3</label>
                                                        <div class="controls">
                                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                                <span class="btn bordered btn-file">
                                                                    <span class="fileupload-new">Select file</span>
                                                                    <span class="fileupload-exists">Change</span>
                                                                    <input type="file" id="file3" name="file3" class="required" accept="image/x-eps,application/pdf" />
                                                                </span>
                                                                <span class="fileupload-preview"></span>
                                                                <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none"><i class="icomo-remove-2"></i></a>
                                                            </div><!-- /fileupload -->
                                                            <p class="help-block">either a PDF or a EPS file</p>
                                                        </div>
                                                    </div><!-- /control-group -->
                                                    <div class="control-group">
                                                        <label class="control-label" for="file4">File #4</label>
                                                        <div class="controls">
                                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                                <div class="input-append">
                                                                    <div class="uneditable-input input-large">
                                                                        <i class="icon-file fileupload-exists"></i> 
                                                                        <span class="fileupload-preview"></span>
                                                                    </div>
                                                                    <span class="btn btn-file">
                                                                        <span class="fileupload-new">Select file</span>
                                                                        <span class="fileupload-exists">Change</span>
                                                                        <input type="file" id="file4" name="file4" class="required" accept="image/*,audio/*" />
                                                                    </span>
                                                                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                                </div>
                                                            </div><!-- /fileupload -->
                                                            <p class="help-block">any audio or image file</p>
                                                        </div>
                                                    </div><!-- /control-group -->
                                                    <div class="control-group">
                                                        <label class="control-label" for="file5">File #5</label>
                                                        <div class="controls">
                                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                                <div class="input-append">
                                                                    <div class="uneditable-input input-large">
                                                                        <i class="icon-file fileupload-exists"></i> 
                                                                        <span class="fileupload-preview"></span>
                                                                    </div>
                                                                    <span class="btn btn-file">
                                                                        <span class="fileupload-new">Select file</span>
                                                                        <span class="fileupload-exists">Change</span>
                                                                        <input type="file" id="file5" name="file5" class="required" multiple="" accept="text/plain" />
                                                                    </span>
                                                                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                                                                </div>
                                                            </div><!-- /fileupload -->
                                                            <p class="help-block">one or more plain text files (e.g. *.txt)</p>
                                                        </div>
                                                    </div><!-- /control-group -->
                                                </fieldset>
                                                <div class="form-actions">
                                                    <input class="btn bg-emerald bordered" type="submit" value="Submit" />
                                                    <input class="btn bg-amber bordered" type="reset" value="Reset" />
                                                </div>
                                            </form>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget fileinput -->
                                </div><!-- /span -->

                                <!-- span -->
                                <div class="span6">
                                    <!-- DYNAMIC FORM
                                    ================================================== -->
                                    <!-- widget submitHandler -->
                                    <div class="widget bg-cyan" id="widget-dynamic">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-edit"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Dynamic Form</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-dynamic" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <!-- template -->
                                            <textarea class="hide" id="template">
                                                <div class="control-group">
                                                    <label class="control-label">{0}. Item</label>
                                                    <div class="controls">
                                                        <select class="type" data-fx="select2" name="item-type-{0}">
                                                            <option value="" />Select...
                                                            <option value="0" />Learning jQuery
                                                            <option value="1" />jQuery Reference Guide
                                                            <option value="2" />jQuery Cookbook
                                                            <option vlaue="3" />jQuery In Action
                                                            <option value="4" />jQuery For Designers
                                                        </select>
                                                        <input class="quantity input-mini" autocomplete="off" type="text" min="1" id="item-quantity-{0}" name="item-quantity-{0}" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </textarea><!-- /template -->

                                            <form class="form-vertical" id="orderform" action="" />
                                                <fieldset>
                                                    <legend>Example with custom methods and heavily customized error display</legend>
                                                    <div id="orderitems-totals" class="control-group">
                                                        <label class="control-label">Totals (max 25)</label>
                                                        <div class="controls">
                                                            <input id="totals" class="input-small uneditable-input" name="totals" value="0" max="25" readonly="" />
                                                        </div>
                                                    </div><!-- /control-group -->
                                                </fieldset>
                                                <div class="form-actions">
                                                    <input class="btn bg-emerald bordered" type="submit" value="Submit" />
                                                    <input id="add" class="btn bg-amber bordered" type="button" value="Add item" />
                                                </div>
                                            </form>
                                        </div><!-- /widget content -->

                                    </div> <!-- /widget submitHandler -->
                                </div><!-- /span -->
                            </div><!-- /row -->
                            
                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->
                    
                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        
        <!-- apps component js, optional -->
        <script type="text/javascript" src="js/select2/select2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"></script>
        <script type="text/javascript" src="js/form-validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/form-validate/additional-methods.min.js"></script>
        
        <!-- metro js, required! -->
        <script type="text/javascript" src="js/metro-base.js"></script>
        
        <!-- demo js -->
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript" src="js/demo/form-validation.js"></script>
    </body>
</html>
